<template>
	<div>
		<div v-for="v in list" :key="v.id" class="item" @click="toDetail(v)">
			<div v-if="v.type === 1" class="one">
				<dl>
					<dt>
						<h3>{{ v.title }}</h3>
					</dt>
					<dd>
						<div class="urls">
							<img :src="v" alt v-for="(v, i) in v.urls" :key="i" />
						</div>
						<div>
							<b>{{ v.auther }}</b> ||
							<span>{{ v.createTime }}</span>
						</div>
					</dd>
				</dl>
			</div>
			<div v-if="v.type === 2" class="two">
				<dl>
					<dt>
						<h3>{{ v.title }}</h3>
					</dt>
					<dd>
						<div class="bigUrl">
							<img :src="v.bigUrl" />
						</div>
						<div>
							<b>{{ v.auther }}</b> ||
							<span>{{ v.createTime }}</span>
						</div>
					</dd>
				</dl>
			</div>
			<div v-if="v.type === 3" class="three">
				<dl>
					<dt>
						<div>
							<h3>{{ v.title }}</h3>
							<p>{{ v.desc }}</p>
						</div>
						<div>
							<img :src="v.rightUrl" />
						</div>
					</dt>
					<dd>
						<b>{{ v.auther }}</b> ||
						<span>{{ v.createTime }}</span>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</template>


<script>
export default {
	props: {
		list: {
			type: Array,
			required: true
		}
	},
	methods: {
		toDetail(v) {
			this.$router.push({ path: '/detail', query: v  })
		}
	}
}
</script>

<style lang="scss" scoped>
.item {
	border-bottom: 1px solid #ccc;
	padding: 10px;
	.one {
		.urls {
			display: flex;
			img {
				width: 33%;
				padding: 4px;
			}
		}
	}
	.two {
		img {
			width: 100%;
		}
	}

	.three {
		dl {
			dt {
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
</style>